﻿@inherits LayoutComponentBase
@implements IDisposable

<DemoScriptLoader @ref="@scrollHelperFuncLoader"
                  Code="function scrollToElementTop(element) {
                        if (element.scroll)
                            element.scroll(0, 0);
                        else {
                            element.scrollTop = 0;
                            element.scrollLeft = 0;
                        }
                  }">
</DemoScriptLoader>

<nav class="logo-container p-0 navbar navbar-dark">
    <LayoutToggleButton @bind-StateCssClass="@LayoutStateCssClass" />
    <NavLink class="logo-image text-body" href="" Match="NavLinkMatch.All"/>
    <div class="demo-btn-container d-flex">
        <a class="download-btn navbar-toggler d-inline-block bg-primary text-white border-0" href="https://nuget.devexpress.com/" target="_blank" title="Obtain your NuGet feed URL">
            <span class="demo-download-icon"></span>
        </a>
        <div class="@($"bg-light text-dark d-inline-block theme-settings {ThemeSwitcherShown}")">
            <a class="nav-item nav-link" @onclick="@ToggleThemeSwitcherPanel" @onclick:preventDefault href="#">
                <span class="demo-theme-icon"></span>
            </a>
        </div>
    </div>
</nav>
<div class="demo-content @LayoutStateCssClass">
    <div class="sidebar">
        <DxScrollView>
            <NavMenu />
        </DxScrollView>
    </div>
    <div @ref="@mainRef" class="main">
        <div class="content px-4">
            <CascadingValue Value="@ThemeName" Name="ThemeName">
                @Body
            </CascadingValue>
        </div>
        <DemoFooter />
    </div>
    <ThemeSwitcher @bind-Shown="@ThemeSwitcherShown" @bind-ThemeName="@ThemeName"/>
</div>
<DemoFooter />
@code {
    DemoScriptLoader scrollHelperFuncLoader;
    ElementReference mainRef;

    [Inject] NavigationManager NavigationManager { get; set; }
    [Inject] IJSRuntime JsRuntime { get; set; }

    string ThemeName { get; set; }

    protected override void OnInitialized()
    {
        NavigationManager.LocationChanged += OnLocationChanged;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
            await ScrollToMainTopIfNeeded(NavigationManager.Uri);
    }

    async void OnLocationChanged(object sender, LocationChangedEventArgs args)
    {
        ThemeSwitcherShown = false;
        await ScrollToMainTopIfNeeded(args.Location);
        await InvokeAsync(StateHasChanged);
    }

    string _layoutStateCssClass;

    string LayoutStateCssClass
    {
        get => _layoutStateCssClass;
        set
        {
            if (_layoutStateCssClass != value)
            {
                _layoutStateCssClass = value;
                ThemeSwitcherShown = false;
            }
        }
    }

    bool ThemeSwitcherShown { get; set; }

    void ToggleThemeSwitcherPanel()
    {
        ThemeSwitcherShown = !ThemeSwitcherShown;
    }

    async Task ScrollToMainTopIfNeeded(string uri)
    {
        if (string.IsNullOrEmpty(NavigationManager.ToAbsoluteUri(uri).Fragment.Replace("#", "")))
            await scrollHelperFuncLoader.InvokeVoidAsync("scrollToElementTop", mainRef);
    }

    public void Dispose() {
        NavigationManager.LocationChanged -= OnLocationChanged;
    }
}
